<template>
    <div id="app">
        <v-header :seller="seller"></v-header>
        <div class="tab border-1px-bottom">
            <div class="tab-item">
                <router-link to="/goods">商品</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/rating">评价</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/seller">商家</router-link>
            </div>
        </div>
            <keep-alive>
                <router-view :seller="seller"></router-view>
            </keep-alive>
    </div>
</template>

<script type="es6">
    import header from './components/header/header'
    export default {
        name: 'app',
        data (){
            return {
                seller: {}
            }
        },
        created(){
            this.$http.get("/api/seller").then((response) => {
                response = response.body
                this.seller = response.seller
            })
        },
        components: {
            'v-header': header
        }
    }
</script>

<style lang="less" rel="stylesheet/less">
    @import '../public/stylesheet/mixin.less';

    #app {
        line-height: 1;
        font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .tab {
        display: flex;
        line-height: 40px;
        height: 40px;
        width: 100%;
        .border-1px-bottom(rgba(7, 17, 27, 0.1));

        .tab-item {
            flex: 1;
            text-align: center;
            a {
                font-size: 14px;
                color: rgb(77, 85, 93);
                &.active {
                    color: rgb(240, 20, 20);
                }
            }
        }
    }
</style>
